<template>
  <div style="max-width: 600px; margin: 0 auto; padding: 20px;">
    <!-- 添加学生表单 -->
    <form @submit.prevent="addStudent">
      <input 
        v-model="newStudent.name" 
        placeholder="姓名" 
        style="padding: 8px; margin-right: 10px; flex: 1;"
        required 
      />
      <input 
        v-model.number="newStudent.math" 
        type="number" 
        placeholder="数学" 
        style="padding: 8px; margin-right: 10px; width: 100px;"
        required 
        min="0" max="100"
      />
      <input 
        v-model.number="newStudent.english" 
        type="number" 
        placeholder="英语" 
        style="padding: 8px; margin-right: 10px; width: 100px;"
        required 
        min="0" max="100"
      />
      <button type="submit" style="padding: 8px 16px; background: #42b983; color: white; border: none; cursor: pointer;">
        添加
      </button>
    </form>

    <!-- 排序选择 -->
    <div style="margin: 20px 0;">
      <select v-model="sortKey" style="padding: 6px;">
        <option value="math">按数学排序</option>
        <option value="english">按英语排序</option>
        <option value="average">按平均分排序</option>
      </select>
    </div>

    <!-- 学生列表 -->
    <div style="border: 1px solid #eee; border-radius: 4px; padding: 10px;">
      <div 
        v-for="student in sortedStudents" 
        :key="student.id" 
        style="display: flex; justify-content: space-between; align-items: center; padding: 10px; border-bottom: 1px solid #f5f5f5;"
      >
        <div>
          <span style="font-weight: bold; margin-right: 10px;">{{ student.name }}</span>
          <span>数学: {{ student.math }}</span>
          <span style="margin: 0 10px;">|</span>
          <span>英语: {{ student.english }}</span>
          <span style="margin: 0 10px;">|</span>
          <span>平均分: {{ student.average.toFixed(1) }}</span>
        </div>
        <button 
          style="padding: 4px 12px; background: #f44336; color: white; border: none; cursor: pointer;"
          @click="deleteStudent(student.id)"
        >
          删除
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

// 学生数据
const students = ref([
  { id: 1, name: '张三', math: 90, english: 85 },
  { id: 2, name: '李四', math: 78, english: 92 },
  { id: 3, name: '王五', math: 88, english: 76 }
])

// 新增学生表单数据
const newStudent = ref({ name: '', math: 0, english: 0 })

// 排序方式
const sortKey = ref('math')

// 计算属性：排序后的学生列表（带平均分）
const sortedStudents = computed(() => {
  return [...students.value]
    .map(student => ({
     ...student,
      average: (student.math + student.english) / 2
    }))
    .sort((a, b) => b[sortKey.value] - a[sortKey.value])
})

// 添加学生
const addStudent = () => {
  if (!newStudent.value.name.trim()) {
    alert('请输入姓名')
    return
  }
  
  const newId = students.value.length > 0 
    ? Math.max(...students.value.map(s => s.id)) + 1 
    : 1
  
  students.value.push({
    id: newId,
    ...newStudent.value
  })
  
  // 清空表单
  newStudent.value = { name: '', math: 0, english: 0 }
}

// 删除学生
const deleteStudent = (id) => {
  if (confirm('确定要删除该学生吗？')) {
    students.value = students.value.filter(s => s.id !== id)
  }
}
</script>

<style scoped>
/* 简单样式，可根据需要调整 */
</style>